<template>
  <Select
    class="icon-select"
    :value="prefix"
    :prefix="icon || prefix"
    placeholder="请选择菜单图标"
    @on-change="selectIcon"
  >
    <Option v-for="item in iconAll" :key="item" :value="item" :label="item"
      ><Icon :type="item"
    /></Option>
  </Select>
</template>

<script>
export default {
  name: "iconSelect",
  data() {
      return {
        icon: null
      }
  },
  props: ["iconAll", "prefix"],
  watch: {
    prefix(val) {
        this.icon = val;
    }
  },
  methods: {
      selectIcon(e) {
        this.$emit("selectIcon", e);
      }
  }
};
</script>

<style lang="less" scoped>
.icon-select {
  /deep/.ivu-select-selection .ivu-select-prefix {
    padding: 0;
    i {
      width: 30px;
      height: 30px;
      display: inline-block;
      text-align: center;
      line-height: 30px;
      background-color: #f8f8f9;
      border-right: 1px solid #dcdee2;
      border-radius: 4px 0 0 4px;
    }
  }
  li {
    display: inline-block;
    i {
      font-size: 24px;
    }
  }
}
</style>